<template>
  <view class="my-order">
    <!-- 头部一行4个 -->
    <view class="order-header">
      <view
        class="header-item" 
        v-for="(item,index) in tabList" 
        :key='index'
        :class='tabIndex==index?"active":""'
        @tap="changeTab(index)"
        >{{item.name}}</view>
    </view>
    
    <view class='order-main'>
<!--     <view class="order-main" v-for="(orders,i) in orderList" :key="i"> -->
      
      <!-- 这三个区域点击进入订单详情界面 -->
      <!-- 这是假的固定order_id -->
      <view @click="goToOrderDetail(order_id)">
        <!-- 订单编号和状态 -->
        <view class="main-header">
          <view class="order-id">订单编号:{{order_id}}</view>
          <view class="order-state color">订单状态:{{order_state}}</view>
        </view>
        
        <!-- 订单商品主体部分 -->
       <view class="order-goods-list">
          <view v-for="(goods,i) in orderList" :key="i">
            <my-goods :goods="goods" :showCount="true"></my-goods>
         </view>
        </view>

        <!-- 总价 -->
        <view class="totalPrice">
          订单总金额：<text style="color: red;">￥{{total_price}}</text>(包含运费<text style="color: red;">￥{{deliver_fee}}</text>)
        </view>
      </view>
      
      <!-- 支付 -->
      <view class="main-footer" v-if="order_cate == 'toPay' " @click="gotoOrderCreate()">
        <view class="footer-text f-color">支付</view>
      </view>
      
      <!-- 确认收货 -->
      <view class="main-footer" v-if="order_cate == 'toReceive' ">
        <view class="footer-text f-color">确认收货</view>
      </view>
      
<!--      </view> -->
      
    </view>
  </view>
</template>

<script>
  
  
  export default {
    data() {
      return {
        // 顶部选项卡数据
        tabList:[
          {name:"全部订单"},
          {name:"待支付"},
          {name:"待发货"},
          {name:"待收货"}
        ],
        
        // 请求参数对象，测试用
        queryObj:{
          // 上面两个参数测试用，无意义
          query:'',
          cid:6,
          // 页面索引
          pagenum:1,
          // 每页长度
          pagesize:5,
          // 订单种类
          order_state:'',
          // 订单总价
          total_price:100,
          // 运费
          deliver_fee:10,
        },
        
        // 订单总数
        total:0,
        
        // 储存订单信息
        orderList:[],
        
        // 虚假的值
        order_id:"ASDWHd123",
        total_price:100,
        deliver_fee:10,
        order_state:'toPay',
        
        // 用于帮助节流阀判断是否在请求数据
        isloading:false,
        
        // 用于辨别现在查看哪种订单类型
        tabIndex:0,
        
        // 用于辨别现在是哪种类型的订单
        order_cate:"",
    }
  },
  
  onLoad(options){
    // console.log(options.order_cate)
    this.order_cate = options.order_cate
    // console.log(this.order_cate)
    
    // 根据传进来的参数跳转至对应分类
    if(this.order_cate == "all"){
      this.changeTab(0)
    }else if(this.order_cate == "toPay"){
      this.changeTab(1)
    }else if(this.order_cate == "toDeliver"){
      this.changeTab(2)
    }else if(this.order_cate == "toReceive"){
      this.changeTab(3)
    }

  },
  
  methods:{
    // 顶部切换,根据index的值改变order_cate从而请求不同类型的订单
    changeTab(index){
      // console.log(index)
      
      if(index == 0){
        this.order_cate = "all"
      }else if(index == 1){
        this.order_cate = "toPay"
      }else if(index == 2){
        this.order_cate = "toDeliver"
      }else if(index == 3){
        this.order_cate = "toReceive"
      }
      
      this.tabIndex = index;
      // console.log(index)
      
      // 先清空原来的数据列表
      this.orderList = []
      
      // 再重新获取数据
      this.getOrderList()
    },
    
    // 获取订单
    async getOrderList(cb){
      
      // console.log(1)
      // 打开节流阀
      this.isloading = true
      
      // 发起请求
      const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
      
      // console.log(res)
      
      // 关闭节流阀
      this.isloading = false
      
      // 如果传进来下拉触底停止函数则执行
      cb && cb()
      
      // 新旧数据拼接
      this.orderList = [...this.orderList,...res.message.goods]
      this.total = res.message.total
      
      // 加假数据
      this.orderList[0].goods_count = 1
      // console.log(this.orderList[0].goods_count)
    },
    
    onReachBottom(){
      // 判断数据是否加载完毕
      if(this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
      // 判断当前是否在请求数据
      if(this.isloading) return
      // 让页码值自增加一
      this.queryObj.pagenum++
      this.getOrderList()
    },
    
    // 下拉触底
    onPullDownRefresh(){
      // 重置关键数据
      this.queryObj.pagenum = 1
      this.total = 0
      this.isloading = false
      this.orderList = []
      
      // 重新发起请求
      this.getOrderList(() => uni.stopPullDownRefresh())
    },
    
    // 前往订单详情界面
    goToOrderDetail(order_id){
      uni.navigateTo({
        url:'/subpkg/my_order_detail/my_order_detail?order_id=' + order_id
      })
    },
    
    // 点击支付前往创建订单界面
    gotoOrderCreate(){
      // console.log(this.orderList)
      
      uni.navigateTo({
        url:'/subpkg/order_confirm/order_confirm?order_id=' + this.order_id
      })
    }
    
    
  }
  }
</script>

<style lang="scss">
  .my-order{
    
    
    .order-header{
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 2rpx solid #F7F7F7;
      .header-item{
        line-height:120rpx;
        text-align: center;
        flex:1;
      }
    }
    
    .order-main{
      border-bottom: 1px solid #636263;
      .main-header{
        display: flex;
        justify-content: space-between;
        background-color: #FFFFFF;
        .order-id{
          padding:20rpx;
        }
        .order-state{
          padding:20rpx;
        }
      }
      
      .totalPrice{
        padding: 20rpx;
        background-color: #FFFFFF;
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid #f0f0f0;
      }
      
      .main-footer{
        padding: 20rpx;
        background-color: #FFFFFF;
        display: flex;
        justify-content: flex-end;
        .footer-text{
          border:2rpx solid #66ccff;
          padding:10rpx 30rpx;
          border-radius: 30rpx;
          
        }
      }
    }
  }
  
  .active{
    border-bottom: 4rpx solid #49BDFB;
  }
  
  .color{
    color:#66ccff;
  }
  
  .bg-color{
    background-color: #F7F7F7;
  }
  
  .f-color{
    color:#636263;
  }
   
// Page {
//         background-Color: #FFFFFF;
//     }
  

  
</style>
